<style>
    #BloodSpiderBox {
        padding: 20px;
    }
    
    .faq-container {
        max-width: 100%;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
    
    .faq-header {
        background-color: #1E9FFF;
        color: white;
        padding: 20px;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
    }
    
    .faq-content {
        padding: 20px;
    }
    
    .create-btn {
        margin-bottom: 20px;
    }
    
    .search-area {
        margin-bottom: 15px;
    }
    
    .description-preview {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .desc-full {
        white-space: pre-wrap;
        word-break: break-all;
    }
</style>

<div class="faq-container">
    <div class="faq-header">常见问题解决</div>
    <div class="faq-content">
        <!-- 搜索区域 -->
        <div class="layui-form-item search-area">
            <div class="layui-input-block">
                <div class="layui-input-inline" style="width: 300px;">
                    <input type="text" id="searchKeyword" placeholder="请输入问题标题或描述进行搜索" class="layui-input">
                </div>
                <button class="layui-btn" id="searchBtn">搜索</button>
                <button class="layui-btn layui-btn-primary" id="resetBtn">重置</button>
                <button class="layui-btn layui-btn-normal" id="refreshBtn">刷新数据</button>
                <button class="layui-btn layui-btn-danger" id="batchDeleteBtn">
                    <i class="layui-icon">&#xe640;</i> 批量删除
                </button>
                <button class="layui-btn layui-btn-blue" id="createFaqBtn">
                    <i class="layui-icon">&#xe608;</i> 创建问题
                </button>
            </div>
        </div>
        
        <!-- 表格 -->
        <table class="layui-table" lay-data="{height:315}" id="ID-faq-table"></table>
    </div>
</div>

<!-- 工具栏模板 -->
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>

<!-- 创建/编辑问题的弹出层 -->
<div id="faqFormLayer" style="display: none;">
    <form class="layui-form" id="faqForm" lay-filter="faqForm" style="padding: 20px;">
        <input type="hidden" name="id" id="faqId">
        <div class="layui-form-item">
            <label class="layui-form-label">问题标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" id="faqTitle" required lay-verify="required" placeholder="请输入问题标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">问题描述</label>
            <div class="layui-input-block">
                <textarea name="description" id="faqDescription" required lay-verify="required" placeholder="请输入问题描述" class="layui-textarea" rows="6" style="resize: vertical;"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submitForm">保存</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>
            </div>
        </div>
    </form>
</div>

<!-- 查看问题的弹出层 -->
<div id="viewFaqLayer" style="display: none;">
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">问题标题</label>
            <div class="layui-input-block">
                <p class="layui-form-mid layui-word-break" id="viewTitle"></p>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">问题描述</label>
            <div class="layui-input-block">
                <p class="layui-form-mid layui-word-break desc-full" id="viewDescription"></p>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-block">
                <p class="layui-form-mid layui-word-break" id="viewCreateTime"></p>
            </div>
        </div>
    </div>
</div>

<!-- Markdown解析库 -->
<script src="/static/js/marked.js"></script>

<script>
    layui.use(['table', 'form', 'layer'], function() {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        
        // 问题数据存储键名
        var FAQ_DATA_KEY = 'faqData';
        
        // 存储原始问题数据
        var allFaqData = [];
        
        // 渲染表格
        var faqTable = table.render({
            "elem": "#ID-faq-table",
            "title": "常见问题列表",
            "cols": [[
                {type: 'checkbox', fixed: 'left'},
                {"field": "id", "title": "ID", "width": 80, "sort": true},
                {"field": "title", "title": "问题标题", "width": 400},
                {"field": "description", "title": "问题描述", "width": 600, "templet": function(d) {
                    return '<div class="description-preview" title="' + d.description + '">' + d.description + '</div>';
                }},
                {"field": "createTime", "title": "创建时间", "width": 180, "sort": true, "templet": function(d) {
                    return new Date(d.createTime).toLocaleString('zh-CN', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        second: '2-digit'
                    });
                }},
                {"field": "Action", "title": "操作", "width": 200, "fixed": "right", "align": "center", "toolbar": "#toolbar"}
            ]],
            "data": [], // 初始为空数据
            "page": true,
            "limit": 10
        });
        
        // 初始化数据
        function initData() {
            if (!localStorage.getItem(FAQ_DATA_KEY)) {
                var defaultData = [
                    {
                        id: 1,
                        title: '如何取消订单？',
                        description: '进入订单管理页面，找到需要取消的订单，点击订单操作列的"取消"按钮，在弹出的确认对话框中点击"确定"。\n\n注意：只有"待处理"状态的订单可以取消，已开始处理的订单无法取消。',
                        createTime: new Date().toISOString()
                    },
                    {
                        id: 2,
                        title: '如何查看订单状态？',
                        description: '登录系统后，点击左侧导航栏的"订单管理"，在订单列表中可以查看所有订单的状态。订单状态包括：待处理、处理中、已完成、已取消等。',
                        createTime: new Date().toISOString()
                    },
                    {
                        id: 3,
                        title: '如何修改个人信息？',
                        description: '点击页面右上角的用户头像，选择"个人设置"，在个人设置页面可以修改昵称、联系方式等信息。修改完成后点击"保存"按钮即可。',
                        createTime: new Date().toISOString()
                    },
                    {
                        id: 4,
                        title: '忘记密码怎么办？',
                        description: '在登录页面点击"忘记密码"链接，按照提示输入注册邮箱，系统会发送重置密码链接到您的邮箱。点击链接设置新密码即可。',
                        createTime: new Date().toISOString()
                    },
                    {
                        id: 5,
                        title: '如何导出订单数据？',
                        description: '在订单管理页面，选择需要导出的订单，然后点击页面顶部的"导出"按钮，选择导出格式（Excel或CSV），系统会生成并下载数据文件。',
                        createTime: new Date().toISOString()
                    }
                ];
                localStorage.setItem(FAQ_DATA_KEY, JSON.stringify(defaultData));
            }
        }
        
        // 获取所有问题数据
        function getAllFaqData() {
            var data = localStorage.getItem(FAQ_DATA_KEY);
            return data ? JSON.parse(data) : [];
        }
        
        // 保存问题数据
        function saveFaqData(data) {
            localStorage.setItem(FAQ_DATA_KEY, JSON.stringify(data));
        }
        
        // 加载问题数据
        function loadFaqData() {
            // 显示加载中
            layer.load();
            
            // 从localStorage获取数据
            var data = getAllFaqData();
            
            // 按创建时间降序排序
            data.sort(function(a, b) {
                return new Date(b.createTime) - new Date(a.createTime);
            });
            
            // 保存原始数据用于搜索
            allFaqData = data;
            
            // 更新表格数据
            faqTable.reload({
                data: data
            });
            
            // 隐藏加载中
            layer.closeAll('loading');
        }
        
        // 搜索功能
        function searchFaq(keyword) {
            if (!keyword || keyword.trim() === '') {
                // 没有搜索关键词，显示全部数据
                faqTable.reload({
                    data: allFaqData
                });
                return;
            }
            
            // 执行本地搜索
            var searchResult = allFaqData.filter(function(faq) {
                // 搜索标题
                if (faq.title && faq.title.includes(keyword)) {
                    return true;
                }
                
                // 搜索描述
                if (faq.description && faq.description.includes(keyword)) {
                    return true;
                }
                
                return false;
            });
            
            // 更新表格数据
            faqTable.reload({
                data: searchResult,
                page: {
                    curr: 1 // 重置到第一页
                }
            });
        }
        
        // 打开创建问题弹窗
        function openCreateFaqLayer() {
            // 重置表单
            $('#faqForm')[0].reset();
            $('#faqId').val('');
            
            // 打开弹窗
            layer.open({
                type: 1,
                title: '创建问题',
                content: $('#faqFormLayer'),
                area: ['600px', '450px'],
                btn: [],
                closeBtn: 1
            });
        }
        
        // 打开编辑问题弹窗
        function openEditFaqLayer(faqId) {
            var data = getAllFaqData();
            var faqItem = data.find(item => item.id === faqId);
            
            if (faqItem) {
                // 填充表单数据
                $('#faqId').val(faqItem.id);
                $('#faqTitle').val(faqItem.title);
                $('#faqDescription').val(faqItem.description);
                
                // 打开弹窗
                layer.open({
                    type: 1,
                    title: '编辑问题',
                    content: $('#faqFormLayer'),
                    area: ['600px', '450px'],
                    btn: [],
                    closeBtn: 1
                });
            }
        }
        
        // 打开查看问题弹窗
        function openViewFaqLayer(faqId) {
            var data = getAllFaqData();
            var faqItem = data.find(item => item.id === faqId);
            
            if (faqItem) {
                // 填充查看数据
                $('#viewTitle').text(faqItem.title);
                
                // 使用marked.js将Markdown格式的描述转换为HTML
                var markdownContent = faqItem.description || '';
                var htmlContent = marked.parse(markdownContent);
                $('#viewDescription').html(htmlContent);
                
                var createTime = new Date(faqItem.createTime).toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                });
                $('#viewCreateTime').text(createTime);
                
                // 打开弹窗
                layer.open({
                    type: 1,
                    title: '查看问题',
                    content: $('#viewFaqLayer'),
                    area: ['600px', '500px'],
                    btn: ['关闭'],
                    btn1: function(index, layero) {
                        layer.close(index);
                    }
                });
            }
        }
        
        // 删除问题
        function deleteFaq(faqId) {
            layer.confirm('确定要删除这个问题吗？', {
                btn: ['确定', '取消']
            }, function() {
                var data = getAllFaqData();
                var filteredData = data.filter(item => item.id !== faqId);
                saveFaqData(filteredData);
                loadFaqData();
                layer.msg('删除成功！', {icon: 1});
            });
        }
        
        // 保存问题（创建或编辑）
        function saveFaq(formData) {
            var data = getAllFaqData();
            var id = parseInt(formData.id);
            
            if (id) {
                // 编辑现有问题
                var index = data.findIndex(item => item.id === id);
                if (index !== -1) {
                    data[index].title = formData.title;
                    data[index].description = formData.description;
                }
            } else {
                // 创建新问题
                var maxId = data.length > 0 ? Math.max(...data.map(item => item.id)) : 0;
                data.push({
                    id: maxId + 1,
                    title: formData.title,
                    description: formData.description,
                    createTime: new Date().toISOString()
                });
            }
            
            saveFaqData(data);
            loadFaqData();
            layer.closeAll();
            layer.msg('保存成功！', {icon: 1});
        }
        
        // 批量删除问题
        function batchDeleteFaqs() {
            var checkStatus = table.checkStatus('ID-faq-table');
            var data = checkStatus.data;
            
            if (data.length === 0) {
                layer.msg('请先选择要删除的问题！', {icon: 5});
                return;
            }
            
            // 获取选中的问题ID集合
            var ids = data.map(item => item.id);
            
            layer.confirm('确定要删除选中的 ' + data.length + ' 个问题吗？', {
                btn: ['确定', '取消'],
                icon: 3
            }, function() {
                var allData = getAllFaqData();
                var filteredData = allData.filter(item => !ids.includes(item.id));
                saveFaqData(filteredData);
                loadFaqData();
                layer.msg('删除成功！共删除 ' + data.length + ' 个问题。', {icon: 1});
            });
        }
        
        // 初始化事件监听
        function initEventListeners() {
            // 创建问题按钮点击事件
            $('#createFaqBtn').click(function() {
                openCreateFaqLayer();
            });
            
            // 取消按钮点击事件
            $('#cancelBtn').click(function() {
                layer.closeAll();
            });
            
            // 表单提交事件
            form.on('submit(submitForm)', function(data) {
                saveFaq(data.field);
                return false;
            });
            
            // 搜索按钮点击事件
            $('#searchBtn').on('click', function() {
                var keyword = $('#searchKeyword').val();
                searchFaq(keyword);
            });
            
            // 重置按钮点击事件
            $('#resetBtn').on('click', function() {
                $('#searchKeyword').val('');
                searchFaq('');
            });
            
            // 刷新按钮点击事件
            $('#refreshBtn').on('click', function() {
                loadFaqData();
            });
            
            // 批量删除按钮点击事件
            $('#batchDeleteBtn').on('click', function() {
                batchDeleteFaqs();
            });
            
            // 回车键触发搜索
            $('#searchKeyword').on('keydown', function(e) {
                if (e.keyCode === 13) {
                    var keyword = $(this).val();
                    searchFaq(keyword);
                }
            });
            
            // 表格行操作事件
            table.on('tool', function(obj) {
                var data = obj.data;
                var event = obj.event;
                
                switch(event) {
                    case 'view':
                        openViewFaqLayer(data.id);
                        break;
                    case 'edit':
                        openEditFaqLayer(data.id);
                        break;
                    case 'delete':
                        deleteFaq(data.id);
                        break;
                }
            });
        }
        
        // 页面加载时初始化
        $(document).ready(function() {
            initData();
            loadFaqData();
            initEventListeners();
        });
    });
</script>